import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Chart } from 'react-google-charts'; // 以 Google 图表为例，或选择其他图表库

const Container = styled.div`
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
`;

const Title = styled.h2`
  text-align: center;
  font-size: 24px;
  color: #4A90E2;
  font-family: 'Roboto', sans-serif;
`;

const Button = styled.button`
  display: block;
  margin: 20px auto;
  background-color: #4A90E2;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;

  &:hover {
    background-color: #357ABD;
  }
`;

const TimeDistribution = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  // 调用大模型 API 获取时间分布数据
  const fetchDistribution = async () => {
    try {
      // 假设后端接入大模型服务，API 地址为 /api/distribution
      const response = await fetch('http://localhost:5000/api/distribution');
      const result = await response.json();
      const chartData = [
        ['Category', 'Hours'], // 数据标题
        ...result.map((item) => [item.category, item.hours]),
      ];
      setData(chartData);
      setLoading(false);
    } catch (error) {
      console.error('Error fetching distribution:', error);
    }
  };

  useEffect(() => {
    fetchDistribution();
  }, []);

  return (
    <Container>
      <Title>时间分布</Title>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={data}
          options={{
            title: '时间占比',
            pieHole: 0.4, // 设置为 0 则为普通饼图，非 0 则为环形图
            colors: ['#4A90E2', '#FFC107', '#FF5722', '#8BC34A', '#00BCD4'],
          }}
        />
      )}
      <Button onClick={() => window.history.back()}>返回</Button>
    </Container>
  );
};

export default TimeDistribution;
